<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script>
   function add(){
      //新建要增加的节点
      var li = document.createElement('li');
      var txt = document.createTextNode('人民');
      li.appendChild(txt);
      //找到要添加到的父节点
      var ul = document.getElementsByTagName('ul')[0];
      //添加到父节点
      ul.appendChild(li);
    }
    function del(){
      //找到要删除的节点
      var lis = document.getElementsByTagName('li');
      var lastli = lis[lis.length - 1];
      //让父节点来进行删除操作
      //lastli.parentNode.removeChild(lastli);
	  var ul = document.getElementsByTagName('ul')[0];
	  ul.removeChild(ul.childNodes[0]);
    }
    function show(){
      //找到到节点
      var obj = document.getElementById('inputId');
	  alert(obj.value);
	  //alert(obj.attributes['value'].value);
	  alert(obj.attributes['id'].value);
	  alert(obj.getAttribute('type'));

	  var ul = document.getElementsByTagName('ul')[0];
	  //alert(ul.nodeType);
	  alert(ul.innerHTML);
	  alert(ul.innerText);
    }
  </script>
</head>
<body>
  <input type="button" value="增加一个节点" onclick="add();">
  <input type="button" value="删除最后一个节点" onclick="del();">
  <input type="button" value="显示属性" onclick="show();">
  <br>
  <input type="text" value="input输入值" id="inputId" >
  <ul>
    <li>东</li>
    <li>南</li>
    <li>西</li>
    <li>北</li>
  </ul>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>
</html>

